'use client'
import {
    MenuFoldOutlined,
    HomeOutlined,
    PoweroffOutlined,
    MenuUnfoldOutlined,
    FileOutlined,
    DownOutlined,
    UserOutlined,
    BookOutlined, ExclamationCircleFilled
} from '@ant-design/icons';
import zhCN from 'antd/es/locale/zh_CN';
import { Layout, Spin, Menu, Tree, DatePicker, Dropdown, MenuProps, Form, Modal, Button, message, ConfigProvider, Popconfirm, Input, Table, Select, Col, Row, Drawer } from 'antd';
import type { TableColumnsType, PopconfirmProps, SelectProps,CheckboxProps } from 'antd';
import React, { useState, useCallback, useEffect, useRef } from 'react';
import { useRouter } from 'next/navigation'
import Link from 'next/link';
import type { TreeDataNode, TreeProps, DrawerProps } from 'antd';
import type { TableProps, PaginationProps } from 'antd';
import {
    FolderOpenTwoTone, EditOutlined, CloseOutlined, FileTextOutlined, PlusOutlined
} from '@ant-design/icons';

import { getCookie, levelLoop, getExpandKeys } from '../utils'
const { confirm } = Modal;
const { RangePicker } = DatePicker;
type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
const { Header, Sider, Content } = Layout;
const cancel: PopconfirmProps['onCancel'] = (e) => {
    console.log(e);
};
interface DataType {
    toid: number,
    tofrom: string;
    tohref: string;
    tolink: string;
    toname: string,
    totime: string;
    toquoteGbt?:string;
}
interface selectInfo {
    key: string,
    level: number;
}
interface searchType {
    toname: number,
    tohref: string;
    favDateRange: Array<Date>;
    releaseDateRange:Array<Date>;
    exportType: Array<string>;
}

const showTotal: PaginationProps['showTotal'] = (total) => `一共 ${total} 条`;
const DocMgt: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const [treecollapsed, setTreeCollapsed] = useState(false);
    const [username, setUsername] = useState('');
    const [selctInfo, setSelctInfo] = useState<selectInfo>();
    const [gData, setGData] = useState<TreeDataNode[]>([]);
    const [open, setOpen] = useState(false);
    const [pickedEdit, setPickedEdit] = useState('')
    const [curRow, setCurRow] = useState<DataType>();
    const [kemuId, setKemuId] = useState('');
    const [kemuLevel, setKemuLevel] = useState('');
    const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
    const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
    const [placement, setPlacement] = useState<DrawerProps['placement']>('left');
    const [spinning, setSpinning] = useState(true)
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 1,
        showTotal,
        showSizeChanger: true
    })
    const [componentExportType, setComponentExportType] = useState<searchType['exportType']>(['GB/T']);
    const buttonItemLayout = { wrapperCol: { span: 24 } };
    const options: SelectProps['options'] = [
        { label: 'GB/T格式', value: 'GB/T' },
        { label: 'APA格式', value: 'APA' }
    ]
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [selectRows,setSelectRows]=useState([])
    // 多选项目变化的时候的回调
    const onSelectChange = (newSelectedRowKeys: React.Key[],selectedRows:any) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys,selectedRows);
        setSelectRows(selectedRows)
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const getCheckboxProps = (record: DataType): Partial<CheckboxProps> => {
        return {
          disabled: record.toquoteGbt =='', // 示例：禁用某些行的复选框
          // 你可以在这里添加更多的属性
        };
      };
    const rowSelection: TableRowSelection<DataType> = {
        selectedRowKeys,
        onChange: onSelectChange,
        getCheckboxProps:getCheckboxProps
    }
    const [loading, setLoading] = useState(false)
    const [form] = Form.useForm();
    const useStateRef = useRef('')
    useEffect(() => {
        if (username != '') {
            window.localStorage.setItem('expandKeys', JSON.stringify(expandedKeys))
        }
    }, [expandedKeys])

    const handleDelete = (id: number) => {
        fetch('/SWJDTXT/queryTodelete.action?toid=' + id, { method: 'POST' }).then(res => {
            res.text().then(datas => {
                if (datas == '成功') {
                    message.success('删除成功');
                    fetchTableData(selctInfo?.key, selctInfo?.level)
                } else {
                    message.error('删除失败！')
                }
            })
        })
    };
    const modifyKemu = (record: DataType) => {
        setCurRow(record)
        showDrawer()
    }

    const confirmKemu = () => {
        if (kemuId && kemuLevel) {
            fetch(`/SWJDTXT/queryTooupdat?toid=${curRow?.toid}&tooid=${kemuId}&tolevel=${kemuLevel}`).then(res => {
                res.text().then(result => {
                    if (result == '成功') {
                        onClose()
                        message.success('更新成功，请重新查询！')
                    }
                })
            })
        } else {
            message.warning('请选择要更改的类别')
        }

    }
    const columns: TableColumnsType<DataType> = [
        {
            title: '文献名称',
            dataIndex: 'toname',
            key: 'toname',
            width: 300,
            fixed: 'left',
        },
        {
            title: '链接',
            width: 80,
            dataIndex: 'tolink',
            key: 'tolink',
            render: (_, record) => {
                if (record.tolink.indexOf('http') == 0) {
                    return <a className='text-blue-500' target='_blank' href={record.tolink}>链接</a>
                } else {
                    return '暂无链接'
                }
            },
        },
        {
            title: '文献来源',
            dataIndex: 'tohref',
            key: 'tohref',
            width: 150,
        },
        {
            title: '网站',
            dataIndex: 'tofrom',
            key: 'tofrom',
            width: 150,
        },
        {
            title: '收藏时间',
            dataIndex: 'totime',
            key: 'totime',
            width: 150,
            defaultSortOrder: 'descend',
            sorter: (a, b) => new Date(a.totime).getTime() - new Date(b.totime).getTime(),
        },
        {
            title: '发布时间',
            dataIndex: 'toreleaseTime',
            key: 'toreleaseTime',
            width: 150,
            // defaultSortOrder: 'descend',
            // sorter: (a, b) => new Date(a.totime).getTime() - new Date(b.totime).getTime(),
        },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 180,
            render: (_, record) =>
                <div><Popconfirm
                    title="删除提示"
                    description="你确定要删除这个收藏吗?"
                    onConfirm={() => handleDelete(record.toid)}
                    onCancel={cancel}
                    okText="确定"
                    cancelText="取消"
                >
                    <Button type='primary' size='small' danger>删除</Button>
                </Popconfirm>
                    <Button type='primary' size='small' style={{ marginLeft: 6 }} onClick={() => modifyKemu(record)}>修改类别</Button>
                    <Button type='primary' size='small' disabled={record.toquoteGbt==''} style={{ marginLeft: 6 }} onClick={() => exportTxt(record)}>导出</Button>
                </div>,
        },
    ];
    const [data, setData] = useState<DataType[]>();
    const fetchTreeData = async () => {
        const response = await fetch('/SWJDTXT/queryTtpeo1?ttpeople=' + useStateRef.current, { method: 'POST' });
        const fetchedDatas = await response.json();
        const returnArray = fetchedDatas.map((item: any) => {
            return {
                key: item.ttid,
                pid: item.ttoid,
                level: item.ttlevel,
                title: item.ttname
            }
        })
        let returnArrays = levelLoop(returnArray)
        setGData(returnArrays)
        let expKeys = window.localStorage.getItem('expandKeys');
        if (expKeys && JSON.parse(expKeys).length > 0) {
            setExpandedKeys(JSON.parse(expKeys))
        } else {
            let exKeys = getExpandKeys(returnArrays);
            setExpandedKeys(exKeys)
        }
    }
    useEffect(() => {
        let username = getCookie('sjhm');
        // if (username == '') {
        //    window.location.href="https://www.xsjxkt.com/qd/dl/login"
        //    message.warning('请首先登录！');
        //    return () => { }
        // }
        setUsername(username);
        useStateRef.current = username;
        fetchTableData();
        fetchTreeData()
        setTimeout(() => {
            setSpinning(false)
        }, 3000)
        return () => {
            // 组件即将卸载，这里可以做一些清理工作，如取消请求等
        };
    }, []);
    const fetchTableData = (key?: string, level?: number, currentPage?: number, pageSizes?: number) => {
        let current = currentPage ? currentPage : pagination.current;
        let pageSize = pageSizes ? pageSizes : pagination.pageSize;
        // 获取表格的数据
        let params = `toman=${useStateRef.current}&topage=${current}&topagesize=${pageSize}`
        if (key) {
            params = params + '&tooid=' + key + '&tolevel=' + level
        } else {
            params = params + '&tolevel=5&tooid=0'
        }
        setLoading(true);
        const fromData = form.getFieldsValue() as searchType;
        params = params + '&toname=' + (fromData.toname ? fromData.toname : '');
        params = params + '&tohref=' + (fromData.tohref ? fromData.toname : '');
        // 这里需要做
        if (fromData.favDateRange && fromData.favDateRange.length > 1 && fromData.favDateRange[0] && fromData.favDateRange[1]) {
            params = params + '&totime=' + (fromData.favDateRange[0].format('YYYY-MM-DD') + ',' + fromData.favDateRange[1].format('YYYY-MM-DD'));
        }
        if (fromData.releaseDateRange && fromData.releaseDateRange.length > 1 && fromData.releaseDateRange[0] && fromData.releaseDateRange[1]) {
            params = params + '&toreleaseTime=' + (fromData.releaseDateRange[0].format('YYYY-MM-DD HH:mm:ss') + ',' + fromData.releaseDateRange[1].format('YYYY-MM-DD HH:mm:ss'));
        }
        fetch(`/SWJDTXT/queryTotype?${params}`, { method: 'POST' }).then(res => {
            res.json().then(datas => {
                setData(datas[0].data)
                let pageinfo = { total: datas[0].total, current: current, pageSize: pageSize, showTotal, showSizeChanger: true }
                setPagination(pageinfo)
                setLoading(false)
            })
        }).catch(() => {
            setLoading(false)
        })
    }
    const router = useRouter()
    function onClick(obj: { key: string }) {
        if (obj.key === '1') {
            // 跳转到官网
            window.open('https://www.xsjxkt.com/', '_blank')
        } else {
            // 退出登录
        }
    };
    const onClickMenu: MenuProps['onClick'] = e => {
        if (e.key == '11') {
            // 跳转到用户信息-我的信息页面
            router.push('/user')
        } else if (e.key == '31') {
            // 跳转到自定义数据集-数据集社区页面
            router.push('/dataClub')
        } else if (e.key == '32') {
            // 跳转到自定义数据集-已选数据集页面
            router.push('/dataChosen')
        } else if (e.key == '33') {
            // 跳转到自定义数据集-已选数据集页面
            router.push('/editData')
        }
    };
    const items = [{
        key: '1',
        label: (
            <div>
                <HomeOutlined /><span style={{ marginLeft: 6 }}>回到官网</span>
            </div>
        ),
    }]
    const handleSelect = (selectedKeys: any, info: any) => {
        setSelctInfo({ key: info.node.key, level: info.node.level })
        fetchTableData(info.node.key, info.node.level, 1, pagination.pageSize)
    };
    const choseKemu = (selectedKeys: any, info: any) => {
        setKemuId(info.node.key.toString())
        setKemuLevel(info.node.level.toString())
    };
    const showDrawer = () => {
        setOpen(true);
    };

    const onClose = () => {
        setOpen(false);
    };
    const onPressEnterInput = (e: any, key: string) => {
        // 取消input的显示
        setPickedEdit('');
        // console.log(e.target.defaultValue, key)
        let url = `/SWJDTXT/queryTupdate?ttid=${key}&ttname=${e.target.defaultValue}`
        fetch(url, { method: 'POST' }).then(res => {
            res.text().then(result => {
                if (result == '成功') {
                    fetchTreeData()
                    message.success(' 修改成功！')
                }
            })
        })

    }
    const onBlurInput = (e: any, key: string) => {
        setPickedEdit('');
        let url = `/SWJDTXT/queryTupdate?ttid=${key}&ttname=${e.target.defaultValue}`
        fetch(url, { method: 'POST' }).then(res => {
            res.text().then(result => {
                if (result == '成功') {
                    fetchTreeData()
                    message.success(' 修改成功！')
                }
            })
        })
    }
    const onAdd = (item: any) => {
        setPickedEdit('');
        // 新增节点的API,如果当前的节点已经大于2
        if (item.level >= 3) {
            message.warning('最多只能增加到4级！')
            return
        }
        let nextLevel = item.level + 1;
        let url = `/SWJDTXT/queryTtsave?ttpeople=${username}&ttoid=${item.key}&ttlevel=${nextLevel}&ttname=未命名`
        fetch(url, { method: 'POST' }).then(res => {
            res.text().then((result: string) => {
                if (result == '成功') {
                    message.success(' 新增成功！')
                    fetchTreeData()
                }
            })
        })
    }
    const onEdit = (item: any) => {
        setPickedEdit(item.key);
    }
    const onDelete = (item: any) => {
        // 删除以前需要判断收藏的表格有没有数据，如果有提示,如果没有提示
        // fetch(`/SWJDTXT/?toman=${useStateRef.current}&key=${item.key}`, { method: 'POST' }).then(res => {
        //     res.json().then(datas => {
        //     })
        // })
        // 如果删除的有expandedKeys里面的元素，及时删除这个元素
        let indexs = expandedKeys.indexOf(item.key)
        if (indexs != -1) {
            let newExpandKeys = JSON.parse(JSON.stringify(expandedKeys))
            newExpandKeys.splice(indexs, 1)
            setExpandedKeys(newExpandKeys)
        }
        confirm({
            title: `你确定要删除${item.title}这个类别吗？`,
            icon: <ExclamationCircleFilled />,
            content: '确保该目录下没有收藏的文献和子节点。删除以后不可以恢复！',
            onOk() {
                let url = `/SWJDTXT/deleteType?ttid=${item.key}&ttlevel=${item.level}`
                fetch(url, { method: 'POST' }).then(res => {
                    res.text().then(result => {
                        if (result == '删除成功') {
                            message.success('删除成功')
                            fetchTreeData()
                        } else {
                            message.warning(result)
                        }
                    })
                })
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    const blurLine = (e: any) => {
        if (e.target.parentNode.className == 'ant-tree-title') {
            e.target.parentNode.children[0].children[2].style.display = 'none'
        } else if (e.target.parentNode.parentNode.className == 'ant-tree-title') {
            e.target.parentNode.parentNode.children[0].children[2].style.display = 'none'
        } else if (e.target.parentNode.parentNode.parentNode.className == 'ant-tree-title') {
            e.target.parentNode.parentNode.parentNode.children[0].children[2].style.display = 'none'
        }
    }
    const focusLine = (e: any) => {
        if (e.target.parentNode.className == 'ant-tree-title') {
            e.target.parentNode.children[0].children[2].style.display = 'flex'
        } else if (e.target.parentNode.parentNode.className == 'ant-tree-title') {
            e.target.parentNode.parentNode.children[0].children[2].style.display = 'flex'
        } else if (e.target.parentNode.parentNode.parentNode.className == 'ant-tree-title') {
            e.target.parentNode.parentNode.parentNode.children[0].children[2].style.display = 'flex'
        }
    }
    // 查询表格
    const queryTable = () => {
        if (selctInfo && selctInfo.key && selctInfo.level) {
            fetchTableData(selctInfo.key, selctInfo.level, 1, pagination.pageSize)
        } else {
            fetchTableData('', 0, pagination.current, pagination.pageSize)
        }
    }
    // 重置表单
    const resetForm = () => {
        form.resetFields()

    }
    // 表单的导出数据
    const exportData = () => {
        const fromData = form.getFieldsValue() as searchType;
        if(fromData.exportType.length=0){
            Modal.warning({title:'请选择导出格式在导出！'})
        }else{
            console.log(fromData.exportType);
            console.log(selectRows)
        }
    }
    // 单个导出
    const exportTxt = (record: DataType) => {

    }
    const handleTableChange = (pagination: TableProps<DataType>['pagination']) => {
        if (pagination) {
            setPagination({ total: pagination.total ? pagination.total : 0, current: pagination.current ? pagination.current : 1, pageSize: pagination.pageSize ? pagination.pageSize : 10, showTotal, showSizeChanger: true })
        }
        if (pagination && pagination.current && pagination.pageSize) {
            if (selctInfo && selctInfo.key && selctInfo.level) {
                fetchTableData(selctInfo.key, selctInfo.level, pagination.current, pagination.pageSize)
            } else {
                fetchTableData('', 0, pagination.current, pagination.pageSize)
            }
        }

    }
    const AddLevelOne = () => {
        let url = `/SWJDTXT/queryTtsave?ttpeople=${username}&ttoid=0&ttname=未命名&ttlevel=0`
        fetch(url, { method: 'POST' }).then(res => {
            res.text().then(resText => {
                if (resText == '成功') {
                    fetchTreeData()
                }
            })
        })
    }
    const onExpand: TreeProps['onExpand'] = (expandedKeysValue) => {
        console.log('onExpand', expandedKeysValue);
        // 建议这里存到localStorage里面；每次刷新页面可以从localStorage里面取出来
        setExpandedKeys(expandedKeysValue);
        setAutoExpandParent(false);
    }
    const onTitleRender = (item: any) => {      //  title渲染函数
        let content
        let icon
        let beforeIcon
        if (item.key === pickedEdit) {
            content = (<Input style={{ width: 100 }}
                defaultValue={item.title}
                onPressEnter={(e) => onPressEnterInput(e, item.key)}
                onBlur={(e) => onBlurInput(e, item.key)}
            />)
        } else {
            content = (<div>{item.title}</div>)
        }
        if (item.children && item.children.length && item.children.length > 0) { //  该节点为父节点
            beforeIcon = (<FolderOpenTwoTone twoToneColor="#cdb228" style={{ marginRight: '5px' }} />)
            icon = (
                <span style={{ display: 'none' }}>
                    <PlusOutlined style={{ marginLeft: 10 }} onClick={() => onAdd(item)} />
                    <EditOutlined style={{ marginLeft: 10 }} onClick={() => onEdit(item)} />
                </span>
            )

        } else {    //  该节点为叶子节点
            beforeIcon = (<FileOutlined style={{ marginRight: '5px' }} />)
            icon = (
                <span style={{ display: 'none' }}>
                    <PlusOutlined style={{ marginLeft: 4 }} onClick={() => onAdd(item)} />
                    <EditOutlined style={{ marginLeft: 4 }} onClick={() => onEdit(item)} />
                    <CloseOutlined style={{ marginLeft: 4 }} onClick={() => onDelete(item)} />
                </span>
            )
        }
        return (
            <div style={{ display: 'flex', alignItems: 'center' }} onMouseLeave={blurLine} onMouseEnter={focusLine}>
                {beforeIcon}
                {content}
                {icon}
            </div>
        );

    };
    return (
        <div style={{ height: '100%' }}>
            <ConfigProvider locale={zhCN}>
                <Spin spinning={spinning} fullscreen size="large"></Spin>
                <Layout style={{ height: '100%' }}>
                    <Sider style={{ backgroundColor: '#ffffff' }} width="180" trigger={null} collapsible collapsed={collapsed}>
                        <div className="logo" />
                        <Menu style={{ backgroundColor: '#ffffff', borderRight: '1px solid #0505050f' }}
                            theme="light"
                            onClick={onClickMenu}
                            mode="inline"
                            defaultOpenKeys={['2']}
                            defaultSelectedKeys={['2']}
                            items={[
                                // {
                                //    key: '1',
                                //    icon: <UserOutlined />,
                                //    label: '用户信息',
                                //    children: [
                                //       {
                                //          key: '11',
                                //          label: '我的信息',
                                //       },
                                //    ]
                                // },
                                {
                                    key: '2',
                                    icon: <BookOutlined />,
                                    label: '文献管理',
                                },
                                {
                                    key: '3',
                                    icon: <FileOutlined />,
                                    label: '自定义数据集',
                                    children: [
                                        {
                                            key: '31',
                                            label: '数据集社区',
                                        },
                                        {
                                            key: '32',
                                            label: '我的数据集',
                                        }
                                    ]
                                },
                            ]}
                        />
                    </Sider>
                    <Layout className="site-layout" style={{ backgroundColor: '#fff' }}>
                        <Header className="site-layout-background" style={{ backgroundColor: '#ffffff', paddingLeft: 12 }}>
                            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                className: 'trigger',
                                onClick: () => setCollapsed(!collapsed),
                            })}
                            <div style={{ float: 'right' }}>
                                <Dropdown menu={{ items, onClick }}>
                                    <a onClick={e => e.preventDefault()}>
                                        <UserOutlined /> {username}
                                        <DownOutlined style={{ marginLeft: 8 }} />
                                    </a>
                                </Dropdown>
                            </div>
                        </Header>
                        <Content className="site-layout-background"
                            style={{
                                padding: 12,
                                background: 'rgba(0, 0, 0, 0.05)',
                                borderRadius: 4
                            }}>
                            <div style={{
                                padding: 12,
                                background: '#fff',
                                borderRadius: 4,
                                height: '100%'
                            }}>
                                <Layout style={{ height: '100%', background: '#fff' }}>
                                    <Sider style={{ backgroundColor: '#fff' }} width="230" trigger={null} collapsible collapsed={treecollapsed}>
                                        <div className="logo" />
                                        <Row style={{ padding: 12, borderBottom: '2px solid #ffffff' }}>
                                            <Col span={12}><h2 style={{ fontWeight: 'bolder' }}>归档目录</h2></Col>
                                            <Col span={12} style={{ textAlign: 'right' }}><Button size='small' type="primary" onClick={AddLevelOne}>新增一级菜单</Button></Col>
                                        </Row>
                                        <Tree
                                            showLine
                                            onExpand={onExpand}
                                            expandedKeys={expandedKeys}
                                            autoExpandParent={autoExpandParent}
                                            onSelect={handleSelect}
                                            treeData={gData}
                                            titleRender={onTitleRender}
                                        />
                                    </Sider>
                                    <Content>

                                        <div style={{ marginBottom: 6 }} className='p-1 bg-white'>
                                            <Form form={form}
                                                labelCol={{ span: 7 }}
                                                initialValues={{ exportType: componentExportType }}
                                                wrapperCol={{ span: 17 }}
                                                layout="inline"
                                            >
                                                <Row gutter={24}>
                                                    <Col span={6}>
                                                        <Form.Item<searchType> name="toname" label="文献名称:">
                                                            <Input />
                                                        </Form.Item>
                                                    </Col>
                                                    <Col span={6}>
                                                        <Form.Item<searchType> name="tohref" label="文献来源:">
                                                            <Input />
                                                        </Form.Item>
                                                    </Col>
                                                    <Col span={6}>
                                                        <Form.Item<searchType> name="favDateRange" label="收藏时间:">
                                                            <RangePicker />
                                                        </Form.Item>
                                                    </Col>
                                                    <Col span={6}>
                                                        <Form.Item<searchType> name="exportType" label="导出格式:">
                                                            <Select size="middle" mode="multiple" style={{ width: 224 }} options={options} />
                                                        </Form.Item>
                                                    </Col>
                                                    <Col span={10} className='mt-4'>
                                                        <Form.Item<searchType>  labelCol={{ span: 4 }} name="releaseDateRange" label="发布时间:">
                                                            <RangePicker showTime={{ format: 'HH:mm:ss' }} format="YYYY-MM-DD HH:mm:ss"  />
                                                        </Form.Item>
                                                    </Col>
                                                    <Col span={14} style={{ textAlign: 'right' }} className='mt-4'>
                                                        <Form.Item<searchType>  {...buttonItemLayout}>
                                                            <Button type="primary" onClick={queryTable} style={{ marginLeft: 6 }} autoInsertSpace>
                                                                查询
                                                            </Button>
                                                            <Button style={{ marginLeft: 6 }} onClick={resetForm} autoInsertSpace>
                                                                重置
                                                            </Button>
                                                            <Button style={{ marginLeft: 6 }} onClick={exportData} autoInsertSpace>
                                                                导出
                                                            </Button>
                                                        </Form.Item>
                                                    </Col>
                                                </Row>
                                            </Form>
                                        </div>

                                        <Table
                                            size="small"
                                            columns={columns}
                                            rowSelection={rowSelection}
                                            dataSource={data}
                                            pagination={pagination}
                                            bordered
                                            loading={loading}
                                            onChange={handleTableChange}
                                            rowKey={(record) => record.toid}
                                        />
                                    </Content>
                                </Layout>
                            </div>
                        </Content>
                    </Layout>
                    <Drawer title="目录选择" placement={placement} onClose={onClose} open={open}>
                        <Tree
                            showLine
                            expandedKeys={expandedKeys}
                            autoExpandParent={autoExpandParent}
                            treeData={gData}
                            onSelect={choseKemu}
                        />
                        <div style={{ textAlign: 'center', width: '100%', padding: 12, position: 'absolute', bottom: 0 }}>
                            <Button type='primary' onClick={confirmKemu}>确定</Button>
                        </div>
                    </Drawer>
                </Layout>
            </ConfigProvider>
        </div>
    );
};

export default DocMgt;